<template>
	<view class="CardIndex">
		<HomePage v-show="CurrentPage == 'HomePage'" />
		<classification v-show="CurrentPage == 'classification'" />
		<ShopCart v-if="CurrentPage == 'ShopCart'" ref="ShopCart" />
		<Order v-if="CurrentPage == 'Order'" ref="order" />
		<My v-if="CurrentPage == 'My'" ref="my" />

		<view class="footer">
			<view class="footerItem" @click="ChangeCurrentPage('HomePage')">
				<img :src="
            CurrentPage == 'HomePage'
              ? imgUrl + gameDetailsData.footerIcon[0] + '_Cur.png'
              : imgUrl + gameDetailsData.footerIcon[0] + '.png'
          " class="FooterIcon" />
				<text>首页</text>
			</view>
			<view class="footerItem" @click="ChangeCurrentPage('classification')">
				<img :src="
            CurrentPage == 'classification'
              ? imgUrl + gameDetailsData.footerIcon[1] + '_Cur.png'
              : imgUrl + gameDetailsData.footerIcon[1] + '.png'
          " class="FooterIcon" />
				<text>分类</text>
			</view>
			<view class="footerItem" @click="ChangeCurrentPage('ShopCart')">
				<img :src="
            CurrentPage == 'ShopCart'
              ? imgUrl + gameDetailsData.footerIcon[2] + '_Cur.png'
              : imgUrl + gameDetailsData.footerIcon[2] + '.png'
          " class="FooterIcon" />
				<text>购物车</text>
			</view>
			<view class="footerItem" @click="ChangeCurrentPage('Order')">
				<img :src="
            CurrentPage == 'Order'
              ? imgUrl + gameDetailsData.footerIcon[3] + '_Cur.png'
              : imgUrl + gameDetailsData.footerIcon[3] + '.png'
          " class="FooterIcon" />
				<text>订单</text>
			</view>
			<view class="footerItem" @click="ChangeCurrentPage('My')">
				<img :src="
            CurrentPage == 'My'
              ? imgUrl + gameDetailsData.footerIcon[4] + '_Cur.png'
              : imgUrl + gameDetailsData.footerIcon[4] + '.png'
          " class="FooterIcon" />
				<text>我的</text>
			</view>
		</view>

		<!-- <view class="ApplyForAnOrder" @click="shwModel" v-if="
        (CurrentPage == 'HomePage' || CurrentPage == 'classification') &&
        PlaceAnOrderStatus.auditStatus !== 1
      ">
			<view class="ApplyForAnOrderLeft">
				<view class="ApplyForAnOrderLeftTitle">申请订货</view>
				<view class="ApplyForAnOrderLeftContent">申请并通过后，才可在本店下单</view>
			</view>
			<img class="ApplyForAnOrderRight" :src="imgUrl + gameDetailsData.HomePage.Right_Arrow" />
		</view> -->
		<!-- <view class="cu-modal bottom-modal stateTypeTck" :class="modalName == 'bottomModala' ? 'show' : ''"
			@click="hideModel" v-if="modalName == 'bottomModala'">
			<view class="cu-dialog" @click.stop="">
				<view class="PlaceAnOrder" v-if="!PlaceAnOrderStatus.book"> -->
					<!-- <view class="PlaceAnOrderTitle">
						<view class="PlaceAnOrderTitleTop">
							<view class="Title"> 申请订货 </view>
							<view class="Close" @click="hideModel"> 稍后 </view>
						</view>

						<view class="PlaceAnOrderTitleContent">
							供应商需要通过微信头像、昵称辨别您的身份，以防止价格或者订单信息外泄。
						</view>
					</view> -->

					<!-- <view class="PlaceAnOrderContent">
						<view class="Form">
							<view class="WxAvatar">
								<view class="WxAvatarTitle FormTitle"> 微信头像 </view>
								<view class="WxAvatarContent FormContent" @click="UploadImage">
									<img :src="AddAvatarUrl" alt="" style="width: 100%; height: 100%" />
								</view>
							</view>
							<view class="WxNickName">
								<view class="WxNickNameTitle FormTitle"> 微信昵称 </view>
								<input type="text" v-model="form.nickName" placeholder="请输入微信昵称" class="ContentInput" />
							</view>
							<view class="CompanyName">
								<view class="CompanyNameTitle FormTitle"> 公司名称 </view>
								<input type="text" v-model="form.companyName" placeholder="请输入公司名称"
									class="ContentInput" />
							</view>
							<view class="ContactPerson">
								<view class="ContactPersonTitle FormTitle"> 联系方式 </view>
								<input type="text" v-model="form.contactPhone" placeholder="请输入联系人" class="ContentInput"
									maxlength="11" />
							</view>
						</view> -->

						<!-- <view class="ConfimBtn" @click="Confim"> 申请订货 </view> -->
				<!-- 	</view>
				</view> -->
				<!-- <view class="Status" v-else>
					<view class="wait" v-if="PlaceAnOrderStatus.auditStatus == 0">
						<view class="">订单申请已提交，请等待供应商审核</view>
						<view class="StatusBth" @click="hideModel">我知道了</view>
					</view>
					<view class="refuse" v-if="PlaceAnOrderStatus.auditStatus == 2">
						<view class="">您的申请被供应商驳回</view>
						<view class="StatusBth" @click="test">重新申请</view>
					</view>
				</view> -->
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	import HomePage from "@/pages/HomePage/HomePage.vue";
	import classification from "@/pages/classification/classification.vue";
	import Order from "@/pages/Order/Order.vue";
	import ShopCart from "@/pages/ShopCart/ShopCart.vue";
	import My from "@/pages/My/My.vue";
	import gameDetails from "@/static/lib/public.js";
	export default {
		components: {
			HomePage,
			classification,
			Order,
			My,
			ShopCart,
		},
		data() {
			return {
				CurrentPage: "HomePage",

				imgUrl: this.$http.imgUrl,

				gameDetailsData: gameDetails,

				modalName: null,

				form: {
					avatarUrl: "",
					nickName: "",
					companyName: "",
					contactPhone: "",
				},

				LoginOrNot: false,

				PlaceAnOrderStatus: {},

				AddAvatarUrl: "https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/HomePage/AddAvatar.jpg",
			};
		},
		onLoad() {},
		methods: {
			ChangeCurrentPage(condition) {
				this.CurrentPage = condition;
			},
			hideModel() {
				this.modalName = null;
				this.form.avatarUrl = "";
				this.form.nickName = "";
				this.form.companyName = "";
				this.form.contactPhone = "";
			},
			shwModel() {
				if (this.IsLogin()) {
					this.modalName = "bottomModala";
				} else {
					uni.showToast({
						title: "请先登录",
					});
					uni.navigateTo({
						url: "/pages/login/login",
					});
				}
			},
			async Confim() {
				const url = "/app/book_order/book";
				const res = await this.$http.post(url, {
					...this.form,
				});
				if (res.data.code == 200) {
					uni.showToast({
						title: "申请成功",
						icon: "success",
					});
					this.getPlaceAnOrderStatus();
					this.hideModel();
					return
				}
				uni.showToast({
					title: res.data.code == 500 ? '请勿重复申请' : res.data.message,
					icon: "error",
				});
				console.log(res, "申请订货");
			},
			async getPlaceAnOrderStatus() {
				const res = await this.$http.get("/app/book_order/getBookStatus");
				// console.log(res, '订货状态');
				this.PlaceAnOrderStatus = res.data.data;
				console.log(this.PlaceAnOrderStatus);
			},
			async SelectPic(Url) {
				this.AddAvatarUrl = Url;
				this.form.avatarUrl = Url;
			},
			UploadImage() {
				uni.chooseImage({
					success: async (chooseImageRes) => {
						const url = this.api.my.UploadImage;
						console.log(chooseImageRes, "上传图片");
						uni.uploadFile({
							url: "https://j.kaletcg.com/lzmtest" + url,
							filePath: chooseImageRes.tempFilePaths[0],
							name: "file",
							success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data);
								uni.setStorageSync("avatar", res.data);
								this.SelectPic(res.data);
							},
						});
					},
				});
			},
			test() {
				this.PlaceAnOrderStatus.book = false;
			},
		},
		onShow() {
			const res = this.IsLogin()
			if (res) {
				if (this.CurrentPage == "My") {
					this.$nextTick(() => {
						this.$refs.my.LoginOrNot = this.IsLogin();
						this.$refs.my.getUserInfo();
					});
				} else if (this.CurrentPage == "Order") {
					this.$nextTick(() => {
						this.$refs.order.OrderList = [];
						this.$refs.order.form.pageNumber = 1
						this.$refs.order.totalPage = ''
						this.$refs.order.getOrderList();
					});
				} else if (this.CurrentPage == "ShopCart") {
					this.$nextTick(() => {
						this.$refs.ShopCart.getShopCatList();
					});
				}
			}

			this.LoginOrNot = res;
		},
		watch: {
			LoginOrNot: function(newVal, oldVal) {
				if (newVal == true) {
					this.getPlaceAnOrderStatus();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.CardIndex {
		height: 100%;
	}

	.footer {
		width: 100%;
		height: 132rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding-right: 72rpx;
		text-align: center;
		justify-content: space-between;
		padding-left: 80rpx;

		.footerItem {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;

			.FooterIcon {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.ApplyForAnOrder {
		position: fixed;
		bottom: 10%;
		width: 718rpx;
		height: 112rpx;
		background: linear-gradient(90deg, #3869f6 0%, #5a92f0 100%);
		border-radius: 66rpx 66rpx 66rpx 66rpx;
		opacity: 1;
		text-align: center;
		line-height: 112rpx;
		margin-left: 16rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;

		.ApplyForAnOrderLeft {
			height: 100%;
			padding-left: 30rpx;
			flex: 1;

			.ApplyForAnOrderLeftTitle {
				width: 112rpx;
				height: 40rpx;
				font-size: 28rpx;
				margin-top: -20rpx;
			}

			.ApplyForAnOrderLeftContent {
				width: 336rpx;
				height: 36rpx;
				font-size: 24rpx;
			}
		}

		.ApplyForAnOrderRight {
			width: 68rpx;
			height: 46rpx;
			margin-right: 20rpx;
		}
	}

	.cu-dialog {
		background-color: initial !important;

		.PlaceAnOrder {
			width: 100%;
			height: 100%;
			background-color: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 20rpx;

			.PlaceAnOrderTitle {
				.PlaceAnOrderTitleTop {
					display: flex;
					justify-content: space-between;

					.Title {
						font-size: 32rpx;
					}

					.Close {
						color: #ccc;
					}
				}

				.PlaceAnOrderTitleContent {
					color: #ccc;
					text-align: start;
					margin-top: 30rpx;
					font-size: 25rpx;
				}
			}

			.PlaceAnOrderContent {
				width: 100%;

				.Form {
					width: 100%;

					.WxAvatar,
					.WxNickName,
					.CompanyName,
					.ContactPerson {
						display: flex;
						justify-content: space-between;
						height: 80rpx;
						border-bottom: 1rpx solid #ececec;
						line-height: 80rpx;
						align-items: center;
					}

					.FormTitle {
						// flex: 1;
					}


					.WxAvatarContent {
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 30rpx;
					}

					.ContentInput {
						width: 200rpx;
						margin-left: 80rpx;
						text-align: end !important;
					}
				}

				.ConfimBtn {
					width: 100%;
					height: 74rpx;
					background: #386af6;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					opacity: 1;
					margin-top: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 74rpx;
				}
			}
		}

		.Status {
			width: 100%;
			height: 200rpx;
			background-color: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 20rpx;

			.StatusBth {
				width: 100%;
				height: 80rpx;
				border-radius: 16rpx;
				text-align: center;
				line-height: 80rpx;
				margin-top: 20rpx;
				color: #FFFFFF;
				background-color: #3869f6;
			}
		}
	}
</style>